<template>
  <!-- 右侧顶部按钮 -->
  <div class="right-top-btn">
    <div v-show="showCurrent" class="current-btn" @click="open">
      <div class="btn">
        <img :src="currentBtn[0].icon">
        <div class="remark">
          {{ currentBtn[0].remark }}
        </div>
      </div>
    </div>
    <transition name="slide">
      <div v-show="showOpt" class="right-top-btns">
        <div class="btns">
          <div
            v-for="item in btnList"
            :key="item.id"
            class="btn"
            @click="handleClick(item)">
            <img :src="item.icon">
            <div class="remark">
              {{ item.remark }}
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import 《组件名称》 from '《组件路径》';

export default {
  components: {},
  data() {
    return {
      showOpt: false,
      showCurrent: true,
      timer: null,
      btnList: [
        {
          id: 'btn1',
          clicked: false,
          icon: require('@/assets/images/gis/shiliang.jpg'),
          remark: '矢量'
        },
        {
          id: 'btn2',
          clicked: true,
          icon: require('@/assets/images/gis/weixing.jpg'),
          remark: '影像'
        },
        {
          id: 'btn3',
          clicked: false,
          icon: require('@/assets/images/gis/earth.jpg'),
          remark: '三维'
        },
        {
          id: 'btn4',
          clicked: false,
          icon: require('@/assets/images/gis/shijing.jpg'),
          remark: '实景'
        }
      ]
    }
  },
  computed: {
    currentBtn() {
      return this.btnList.filter(i => i.clicked)
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
    this.timer = null
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    open() {
      this.showOpt = true
      this.showCurrent = false
    },
    handleClick(item) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = null
      this.showOpt = false
      if (item.id === 'btn3') {
        item.remark = item.remark === '三维' ? '二维' : '三维'
        const type = item.remark === '三维' ? '3D' : '2D'
        this.$emit('layerClick', item.id, type)
      } else {
        if (!item.clicked) {
          this.btnList.forEach(b => {
            b.clicked = false
          })
          item.clicked = true
          this.$emit('layerClick', item.id)
        }
      }

      this.timer = setTimeout(() => {
        this.showCurrent = true
      }, 350)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.right-top-btn {
  position: absolute;
  top: 10vh;
  right: 1.6vw;
  height: 8vh;
  z-index: 101;
  overflow: hidden;
  .right-top-btns {
    background-color: aliceblue;
    border-radius: 4px;
    width: 28vh;
    height: 8vh;
    box-shadow: -3px 5px 7px #9c91916b;
    padding: 1vh 0;
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .current-btn {
    background-color: aliceblue;
    border-radius: 4px;
    width: 8vh;
    height: 8vh;
    box-shadow: -3px 5px 7px #9c91916b;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .btn {
    width: 6vh;
    height: 6vh;
    border: 1px solid gray;
    cursor: pointer;
    img {
      height: 4vh;
      width: 100%;
    }
    .remark {
      background: #fff;
      height: 1.4vh;
      font-size: 1.3vh;
      text-align: center;
    }
  }
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}
.slide-enter,
.slide-leave-to {
  margin-left: -200px;
}
</style>
